/**
 * WebGIS主类，高德地图在线api 1.4
 * 高德map   https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key
 * Created by liuye on 21-11-18.
 */
import { axios } from '@/utils/request'
import { markerTip as tip } from '@/utils/map/map'
import api
  from '../../api'

/**
 * 加载高德地图api
 * @returns {Promise<unknown>}
 * @constructor
 */
export function MapLoader() {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap)
    } else {
      let link = document.createElement('link')
      link.type = 'text/css'
      link.rel = 'stylesheet'
      link.src = 'https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css'
      document.head.appendChild(link)

      // 引入，注意链接要用https://
      // 用了2种插件，plugin=AMap.MouseTool,AMap.PolyEditor
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src =
        'https://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=a53edcb3d2d3d7e5d30a38f3198bcba2&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.PlaceSearch,AMap.Autocomplete,AMap.Geolocation,AMap.Geocoder'
      script.onerror = reject
      document.head.appendChild(script)

      let script1 = document.createElement('script')
      script1.type = 'text/javascript'
      script1.async = true
      script1.src = 'https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js'
      script1.onerror = reject
      document.head.appendChild(script1)
    }

    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}

/**
 * 数据列表标点
 * @param _this  vue页面对象
 * @param data 标点数据
 * @param ifClear 是否清除覆盖物，true 清除 ， false 不清除
 */
export function markerPoint(_this, data , ifClear) {
  if(ifClear){
    // 清除地图覆盖物
    _this.map.clearMap() ;
  }
  // 格式化数组
  let arr = flatten(Object.values(data));
  //遍历生成多个标记点
  arr.forEach(value => {
    let v ;
    if (Array.isArray(value) == true) {
      v = value[0]
    } else if (value instanceof Object) {
      v = value
    } else {
      log.error('数据错误！！！')
      return ;
    }
   // 创建标点
   createMarker(_this , v) ;
  })
// 重置窗口
 // _this.map.setFitView()
}
/**
 * 多维数组转化为一维数组
 * @param arr 多维数组
 * @returns {*[]} 数组
 */
export function flatten(arr) {
  return [].concat( ...arr.map(x => Array.isArray(x) ? flatten(x) : x) )
}

/**
 * 创建标点
 * @param v 数据
 */
export function createMarker(_this ,v){
  let icon,marker ;

  if (isUse(v.lx) && isUse(v.jd) && isUse(v.wd)) {
    // 创建一个 Icon
    icon = new _this.AMap.Icon({
      // 图标尺寸
      size: new _this.AMap.Size(25, 34),
      // 图标的取图地址
      image: require('@/assets/img/map/' + v.lx + '.png')
      // 图标所用图片大小
      //imageSize: new AMap.Size(135, 40),
      // 图标取图偏移量
      //imageOffset: new AMap.Pixel(-9, -3)
    })
    // 创建标点
    marker = new _this.AMap.Marker({
      icon: icon,
      position: [v.jd, v.wd], //不同标记点的经纬度
      extData: {
        _this: _this , // vue全局对象
        id: v.id , // id
        macid: v.macid, // 环卫车设备编码，只有环卫工有
        lx: v.lx  // 类型
      },
      map: _this.map
    })
    // 点击事件
    marker.on('click', markerClick)
    // marker.emit('click', { target: marker })//默认初始化不出现信息窗体,打开初始化就出现信息窗体
  }
}

/**
 * 点的点击事件
 * @param e
 */
export function  markerClick(e) {
  // 弹框内容、弹框标题 、数据
  let content ,title,data,
    // 当前vue对象
    _this = e.target.getExtData()._this,
    // 查询id
    id = e.target.getExtData().id,
    // 类型
    type =_this.playType || e.target.getExtData().lx ;
  switch (type) {
    //车辆作业-车辆定位、轨迹
    case 'hwctype':
      getTypeList(api.queryClById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result ;
            title = `<span>车辆信息</span>` ;
            content = [` <p>部门 :  ${data.bm}</p>
                          <p>标准百公里油耗 :  ${data.bzbglyh}</p>
                          <p>车辆标准载重(吨) :  ${data.clbzzz}</p>
                          <p>车辆状况 :  ${data.clzk}</p>
                          <p>车辆自重(吨) :  ${data.clzz}</p>
                          <p>车辆注册时间 :  ${data.clzzsj}</p>
                          <p>车牌号 :  ${data.cph}</p>
                          <p>车牌颜色 :  ${data.cpys}</p>
                          <p>驾驶员 :  ${data.lx}</p>
                          <p>品牌型号 :  ${data.ppxh}</p>
                          <p>设备类型 :  ${data.sblx}</p>
                          <p>设备SN :  ${data.sbsn}</p>
                          <p>所属部门 :  ${data.sysOrgCode}</p>
                <button @click='moveAlong()'>轨迹回放</button><button @click='stopMove()'>停止播放</button>`] ;
            let info = createInfoWindow(title, content.join('<br/>')) ;
            addLineContentToInfoWindow(_this , e , info , api.getClOrbit ,{ id: id }) ;
            // let InfoContent  = _this.vue.extend({
            //   template: `${info.outerHTML}`,
            //   methods: {
            //     moveAlong() {
            //       // 如果有点在移动
            //       if(_this.marker.length > 0){
            //         this.stopMove() ;
            //       }
            //       // 保存初始位置坐标
            //       _this.marker.push(e.target.getPosition()) ;
            //       // 保存当前运动点
            //       _this.point.push(e.target) ;
            //       // 初始轨迹回放
            //       moveMarker(_this ,e.target ,api.getClOrbit ,{ id: id });
            //       // 关闭窗口
            //       infoWindow.close();
            //     },
            //     stopMove(){
            //       if(_this.marker.length > 0){
            //         // 停止移动
            //         _this.point[0].stopMove();
            //         // 复位标点
            //         _this.point[0].setPosition(_this.marker[0]);
            //       }else {
            //         // 停止移动
            //         e.target.stopMove();
            //         // 复位标点
            //         e.target.setPosition(_this.marker[0]);
            //       }
            //       // 关闭窗口
            //       infoWindow.close();
            //       // 删除路径
            //       _this.map.remove(_this.polyline);
            //       // 清空标点位置和路线
            //       _this.marker=[] ;
            //       _this.polyline=[] ;
            //       _this.point=[] ;
            //       // 恢复地图视野
            //       _this.map.setFitView();
            //     }
            //   }
            // })
            // // 弹框信息
            // let component = new InfoContent().$mount();
            // infoWindow.setContent(component.$el)
            // infoWindow.open(_this.map, e.target.getPosition())
          }

        })
        .catch(err => {
        })
      break
    //环卫作业-环卫定位、轨迹
    case 'hwrytype':
      getTypeList(api.ckryxq, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result ;
            title = `<span>环卫人员</span>` ;
            content = [`<p>登陆账号 :  ${data.username}</p>
                                <p>真实姓名 :  ${data.realname}</p>
                                <p>性别 :  ${data.sex}</p>
                                <p>生日 :  ${data.birthday}</p>
                                <p>电话 :  ${data.phone}</p>
                                <p>座机号 :  ${data.telephone}</p>
                                <p>职务 :  ${data.post}</p>
                                <p>工号 :  ${data.workNo}</p>
                                <p>电子邮件 :  ${data.email}</p>
                <button @click='moveAlong()'>轨迹回放</button><button @click='stopMove()'>停止播放</button>`] ;
            let info = createInfoWindow(title, content.join('<br/>')) ;
            // 设备id
            let  macid = e.target.getExtData().macid ;
            addLineContentToInfoWindow(_this , e , info, api.gjhfList ,{ macid: macid }) ;
            // let InfoContent  = _this.vue.extend({
            //   template: `${info.outerHTML}`,
            //   methods: {
            //     moveAlong() {
            //       // 设备id
            //       // let  macid = e.target.getExtData().macid ;
            //       // 如果有点在移动
            //       if(_this.marker.length > 0){
            //         this.stopMove() ;
            //       }
            //       // 保存初始位置坐标
            //       _this.marker.push(e.target.getPosition()) ;
            //       // 保存当前运动点
            //       _this.point.push(e.target) ;
            //       // 初始轨迹回放
            //       moveMarker(_this ,e.target ,api.gjhfList ,{ macid: macid });
            //       // 关闭窗口
            //       infoWindow.close();
            //     },
            //     stopMove(){
            //       if(_this.marker.length > 0){
            //         // 停止移动
            //         _this.point[0].stopMove();
            //         // 复位标点
            //         _this.point[0].setPosition(_this.marker[0]);
            //       }else {
            //         // 停止移动
            //         e.target.stopMove();
            //         // 复位标点
            //         e.target.setPosition(_this.marker[0]);
            //       }
            //       // 关闭窗口
            //       infoWindow.close();
            //       // 删除路径
            //       _this.map.remove(_this.polyline);
            //       // 清空标点位置和路线
            //       _this.marker=[] ;
            //       _this.polyline=[] ;
            //       _this.point=[] ;
            //       // 恢复地图视野
            //       _this.map.setFitView();
            //     }
            //   }
            // })
            // // 窗口事件
            // let component = new InfoContent().$mount();
            // infoWindow.setContent(component.$el)
            // infoWindow.open(_this.map, e.target.getPosition())
          }

        })
        .catch(err => {
        })
      break
    //道路保洁-车辆
    case 'bjcl':
      getTypeList(api.queryClById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>车辆信息</span>`
            content = [
              `
              <p>部门 :  ${data.bm}</p>
              <p>标准百公里油耗 :  ${data.bzbglyh}</p>
              <p>车辆标准载重(吨) :  ${data.clbzzz}</p>
              <p>车辆状况 :  ${data.clzk}</p>
              <p>车辆自重(吨) :  ${data.clzz}</p>
              <p>车辆注册时间 :  ${data.clzzsj}</p>
              <p>车牌号 :  ${data.cph}</p>
              <p>车牌颜色 :  ${data.cpys}</p>
              <p>驾驶员 :  ${data.lx}</p>
              <p>品牌型号 :  ${data.ppxh}</p>
              <p>设备类型 :  ${data.sblx}</p>
              <p>设备SN :  ${data.sbsn}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })
      break
    //道路保洁-加水庄
    case 'jsz':
      getTypeList(api.queryDlbjJszById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>加水庄</span>`
            content = [
              `
              <p>地址 :  ${data.dz}</p>
              <p>单位 :  ${data.dw}</p>
              <p>管理部门 :  ${data.glbm}</p>
              <p>管理人员 :  ${data.glry}</p>
              <p>建成时间 :  ${data.jcsj}</p>
              <p>建设成本 :  ${data.jscb}</p>
              <p>名称 :  ${data.mc}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>占地面积 :  ${data.zdmj}</p>
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })
      break
    //道路保洁-app人员详情
    case 'appry':
      getTypeList(api.queryDlbjRyById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>人员详情</span>`
            content = [
              `
              <p>登陆账号 :  ${data.username}</p>
              <p>真实姓名 :  ${data.realname}</p>
              <p>性别 :  ${data.sex}</p>
              <p>生日 :  ${data.birthday}</p>
              <p>电话 :  ${data.phone}</p>
              <p>座机号 :  ${data.telephone}</p>
              <p>职务 :  ${data.post}</p>
              <p>工号 :  ${data.workNo}</p>
              <p>电子邮件 :  ${data.email}</p>
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })
      break
    //道路保洁-人员详情
    case 'ry':
      getTypeList(api.queryDlbjRyById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>人员详情</span>`
            content = [
              `
              <p>登陆账号 :  ${data.username}</p>
              <p>真实姓名 :  ${data.realname}</p>
              <p>性别 :  ${data.sex}</p>
              <p>生日 :  ${data.birthday}</p>
              <p>电话 :  ${data.phone}</p>
              <p>座机号 :  ${data.telephone}</p>
              <p>职务 :  ${data.post}</p>
              <p>工号 :  ${data.workNo}</p>
              <p>电子邮件 :  ${data.email}</p>
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })
      break
    //生活垃圾
    case 'shlj':
      getTypeList(api.queryShljById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>垃圾信息</span>`
            content = [
              `
              <p>地址 :  ${data.address}</p>
              <p>方向 :  ${data.fx}</p>
              <p>垃圾桶高度 :  ${data.ljtgd}</p>
              <p>垃圾桶名称 :  ${data.ljtmc}</p>
              <p>类型 :  ${data.lx}</p>
               <p>满溢设备1 :  ${data.mysbone}</p>
              <p>满溢设备2 :  ${data.mysbtwo}</p>
              <p>RFID :  ${data.rfid}</p>
              <p>设计容量 :  ${data.sjrl}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>市，区（县） :  ${data.sqx}</p>
              <p>所属情况 :  ${data.ssqk}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>项目部 :  ${data.xmb}</p>
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })
      break
    //生活垃圾 已满
    case 'ym':
      getTypeList(api.queryShljById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>垃圾信息</span>`
            content = [
              `
              <p>地址 :  ${data.address}</p>
              <p>方向 :  ${data.fx}</p>
              <p>垃圾桶高度 :  ${data.ljtgd}</p>
              <p>垃圾桶名称 :  ${data.ljtmc}</p>
              <p>类型 :  ${data.lx}</p>
               <p>满溢设备1 :  ${data.mysbone}</p>
              <p>满溢设备2 :  ${data.mysbtwo}</p>
              <p>RFID :  ${data.rfid}</p>
              <p>设计容量 :  ${data.sjrl}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>市，区（县） :  ${data.sqx}</p>
              <p>所属情况 :  ${data.ssqk}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>项目部 :  ${data.xmb}</p>
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })
      break
    //生活垃圾 预警
    case  'yc':
      getTypeList(api.queryShljById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>垃圾信息</span>`
            content = [
              `
              <p>地址 :  ${data.address}</p>
              <p>方向 :  ${data.fx}</p>
              <p>垃圾桶高度 :  ${data.ljtgd}</p>
              <p>垃圾桶名称 :  ${data.ljtmc}</p>
              <p>类型 :  ${data.lx}</p>
               <p>满溢设备1 :  ${data.mysbone}</p>
              <p>满溢设备2 :  ${data.mysbtwo}</p>
              <p>RFID :  ${data.rfid}</p>
              <p>设计容量 :  ${data.sjrl}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>市，区（县） :  ${data.sqx}</p>
              <p>所属情况 :  ${data.ssqk}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>项目部 :  ${data.xmb}</p>
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })
      break
    //餐厨垃圾
    case 'cclj':
      getTypeList(api.queryCcljById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>垃圾信息</span>`
            content = [
              `
              <p>地址 :  ${data.address}</p>
              <p>方向 :  ${data.fx}</p>
              <p>垃圾桶高度 :  ${data.ljtgd}</p>
              <p>垃圾桶名称 :  ${data.ljtmc}</p>
              <p>类型 :  ${data.lx}</p>
              <p>满溢设备1 :  ${data.mysbone}</p>
              <p>满溢设备2 :  ${data.mysbtwo}</p>
              <p>RFID :  ${data.rfid}</p>
              <p>设计容量 :  ${data.sjrl}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>市，区（县） :  ${data.sqx}</p>
              <p>所属情况 :  ${data.ssqk}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>项目部 :  ${data.xmb}</p>
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })
      break
    //智慧公厕
    case 'zhgc':
      getTypeList(api.queryGcById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>智慧公厕信息</span>`
            content = [
              `
              <p>公厕名称:  ${data.gcmc}</p>
              <p>公厕编号 :  ${data.gcbh}</p>
              <p>公厕地址 :  ${data.gcdz}</p>
              <p>所属单位 :  ${data.ssdw}</p>
              <p>运营单位 :  ${data.yydw}</p>
              <p>公厕类型 :  ${data.gclx}</p>
              <p>农村公厕类型 :  ${data.ncgclx}</p>
              <p>男站位数 :  ${data.nzwws}</p>
              <p>男蹲位数 :  ${data.ndws}</p>
              <p>男座位数 :  ${data.nzws}</p>
              <p>女蹲位数 :  ${data.nvdwws}</p>
              <p>女座位数 :  ${data.nvzws}</p>
              <p>无障碍厕位数 :  ${data.wzacws}</p>
              <p>第三卫生间 :  ${data.dswsj}</p>
              <p>第三卫生间站位数 :  ${data.dswsjzws}</p>
              <p>第三卫生间成人座位数 :  ${data.dswsjcrzws}</p>
              <p>第三卫生间儿童座位数 :  ${data.dswsjetzws}</p>
              <p>公厕等级 :  ${data.gcdj}</p>
              <p>公厕星级 :  ${data.gcxj}</p>
              <p>公厕类别 :  ${data.gclb}</p>
              <p>管理形式 :  ${data.glxs}</p>
              <p>开放开始时间 :  ${data.startKfsj}</p>
              <p>开放结束时间 :  ${data.endKfsj}</p>
              <p>保洁结束时间 :  ${data.endBjsj}</p>
              <p>保洁开始时间 :  ${data.startBjsj}</p>
              <p>管理人员 :  ${data.glry}</p>
              <p>工作人员 :  ${data.gzry}</p>
              <p>建设开始时间 :  ${data.startJssj}</p>
              <p>建设结束时间 :  ${data.endJssj}</p>
              <p>启用时间 :  ${data.qysj}</p>
              <p>造价(千元) :  ${data.zj}</p>
              <p>占地面积(㎡) :  ${data.zdmj}</p>
              <p>建筑面积(㎡) :  ${data.jzmj}</p>
              <p>建筑类型 :  ${data.jzlx}</p>
              <p>所有权归属 :  ${data.syqgs}</p>
              <p>非环卫部门厕所分类 :  ${data.fhwcsfl}</p>
              <p>规划许可 :  ${data.ghxk}</p>
              <p>公厕照片 :  ${data.gczp}</p>
              <p>模型结构 :  ${data.mxjg}</p>
              <p>污物冲洗形式 :  ${data.wwcxxs}</p>
              <p>收费情况 :  ${data.sfqk}</p>
              <p>方向 :  ${data.dxbs}</p>
              <p>导向标识 :  ${data.dxbs}</p>
              <p>新风系统 :  ${data.xfxt}</p>
              <p>除臭系统 :  ${data.ccxt}</p>
              <p>除臭机 :  ${data.ccj}</p>
              <p>热水系统 :  ${data.rsxt}</p>
              <p>评价系统 :  ${data.pjxt}</p>
              
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })
      break
    //垃圾中转站
    case 'zzz':
      getTypeList(api.queryZzzById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>垃圾中转站</span>`
            content = [
              `
              <p>地址:  ${data.dz}</p>
              <p>单位 :  ${data.dw}</p>
              <p>方向 :  ${data.fx}</p>
              <p>关联业务 :  ${data.glyw}</p>
              <p>工作人员 :  ${data.gzry}</p>
              <p>工作人员数 :  ${data.gzrys}</p>
              <p>建成时间 :  ${data.jcsj}</p>
              <p>街道(乡镇) :  ${data.jdxz}</p>
              <p>居委会(村) :  ${data.jwhc}</p>
              <p>机械数量 :  ${data.jxsl}</p>
              <p>建筑面积 :  ${data.jzmj}</p>
              <p>垃圾运向分类 :  ${data.ljyxfl}</p>
              <p>垃圾中转站代码 :  ${data.ljzzzdm}</p>
              <p>类型 :  ${data.lx}</p>
              <p>名称 :  ${data.mc}</p>
              <p>启用日期 :  ${data.qyrq}</p>
              <p>日均设计转运量 :  ${data.rjsjzyl}</p>
              <p>设备投资 :  ${data.sbtz}</p>
              <p>市、区(县) :  ${data.sqx}</p>
              <p>所有权归属分类 :  ${data.syqgsfl}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>占地面积 :  ${data.zdmj}</p>
              <p>在指挥中心显示 :  ${data.zzhzxxs}</p>
              <p>中转垃圾运距 :  ${data.zzljyj}</p>
              <p>造价 :  ${data.zj}</p>
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })
      break
    //垃圾处置场信息
    case 'czc':
      getTypeList(api.queryCzcById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>垃圾处置场信息</span>`
            content = [
              `
              <p>处置场类型:  ${data.czclx}</p>
              <p>单位 :  ${data.dw}</p>
              <p>方向 :  ${data.fx}</p>
              <p>负责人 :  ${data.fzr}</p>
              <p>工作人员 :  ${data.gzry}</p>
              <p>垃圾处置场代码 :  ${data.ljczcdm}</p>
              <p>联系电话 :  ${data.lxdh}</p>
              <p>名称 :  ${data.mc}</p>
              <p>启用日期 :  ${data.qyrq}</p>
              <p>设计处理能力 :  ${data.sjclnl}</p>
              <p>市，区（县） :  ${data.sqx}</p>
              <p>所属情况 :  ${data.ssqk}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>位置 :  ${data.wz}</p>
              <p>占地面积 :  ${data.zdmj}</p>
              <p>造价 :  ${data.zj}</p>
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })

      break
    //问题督察信息
    case 'wtdc':
      getTypeList(api.queryWtdcById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>问题督察信息</span>`
            content = [
              `
              <p>解决时限:  ${data.jjsx}</p>
              <p>解决截止时间 :  ${data.jzsj}</p>
              <p>方向 :  ${data.fx}</p>
              <p>是否重要 :  ${data.sdzy}</p>
              <p>事件位置 :  ${data.sjwz}</p>
              <p>视频 :  ${data.sp}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
              <p>图片 :  ${data.tp}</p>
              <p>问题编号 :  ${data.wtbh}</p>
              <p>问题类型_第一级 :  ${data.wtlxOne}</p>
              <p>问题类型_第二级 :  ${data.wtlxTwo}</p>
              <p>问题类型_第三级 :  ${data.wtlxThree}</p>
              <p>问题来源 :  ${data.wtly}</p>
              <p>问题名称 :  ${data.wtmc}</p>
              <p>问题说明 :  ${data.wtsm}</p>
              <p>问题语音 :  ${data.wtyy}</p>
              <p>问题状态 :  ${data.wtzt}</p>
              <p>应扣分数 :  ${data.ykfs}</p>
              <p>指派单位 :  ${data.zpdw}</p>
              <p>指派人 :  ${data.zpr}</p>
              <p>指派时间 :  ${data.zpsj}</p>
              <p>执行单位 :  ${data.zxdw}</p>
              <p>执行人 :  ${data.zxr}</p>
              `
            ]
          }
          // 初始化弹框数据
          addContentToInfoWindow(_this ,e ,title , content);
        })
        .catch(err => {
        })
      break
    //危险源信息
    case 'wxy':
      getTypeList(api.queryWxyById, { id: id })
        .then(res => {
          if (res.code == 200) {
            data = res.result
            title = `<span>危险源信息</span>`
            content = [
              `
              <p>危险源名称 :  ${data.wxymc}</p>
              <p>管理部门:  ${data.glbm}</p>
              <p>地址 :  ${data.dz}</p>
              <p>方向 :  ${data.fx}</p>
              <p>管理人员 :  ${data.glry}</p>
              <p>类型 :  ${data.lx}</p>
              <p>设备编号 :  ${data.sbbh}</p>
              <p>所属单位 :  ${data.ssdw}</p>
              <p>所属部门 :  ${data.sysOrgCode}</p>
             
              `
            ] ;
            // 初始化弹框数据
            addContentToInfoWindow(_this ,e ,title , content);
          }

        })
        .catch(err => {
        })
      break
  }
}

/**
 * 轨迹回放添加信息窗口及轨迹回放事件
 * @param _this 当前vue 对象
 * @param e 点击点返回数据
 * @param info 信息窗口内容
 * @param url 轨迹信息请求
 * @param param 请求参数
 */
export function addLineContentToInfoWindow(_this, e , info , url , param){
      //信息窗口实例
  let infoWindow = new _this.AMap.InfoWindow({ offset: new _this.AMap.Pixel(5, -35) }) ,
      //弹出内容
      InfoContent  = _this.vue.extend({
        template: `${info.outerHTML}`,
        methods: {
          moveAlong() {
            // 如果有点在移动
            if(_this.marker.length > 0){
              this.stopMove() ;
            }
            // 保存初始位置坐标
            _this.marker.push(e.target.getPosition()) ;
            // 保存当前运动点
            _this.point.push(e.target) ;
            // 初始轨迹回放
            moveMarker(_this ,e.target ,url ,param);
            // 关闭窗口
            infoWindow.close();
          },
          stopMove(){
            if(_this.marker.length > 0){
              // 停止移动
              _this.point[0].stopMove();
              // 复位标点
              _this.point[0].setPosition(_this.marker[0]);
            }else {
              // 停止移动
              e.target.stopMove();
              // 复位标点
              e.target.setPosition(_this.marker[0]);
            }
            // 关闭窗口
            infoWindow.close();
            // 删除路径
            _this.map.remove(_this.polyline);
            // 清空标点位置和路线
            _this.marker=[] ;
            _this.polyline=[] ;
            _this.point=[] ;
            // 恢复地图视野
            _this.map.setFitView();
          }
        }
      }) ;

  // 弹框信息
  let component = new InfoContent().$mount();
  infoWindow.setContent(component.$el)
  infoWindow.open(_this.map, e.target.getPosition())
}

/**
 *
 * @param _this 当前vue 对象
 * @param e 点击点返回数据
 * @param title 信息窗口标题
 * @param content 信息窗口内容
 */
export function addContentToInfoWindow(_this ,e ,title , content){
  let info = createInfoWindow(title, content.join('<br/>')),
      //信息窗口实例
      infoWindow = new _this.AMap.InfoWindow({ offset: new _this.AMap.Pixel(5, -35) });
  // 设置信息窗口内容
  infoWindow.setContent(info)
  infoWindow.open(_this.map, e.target.getPosition())
}
/**
 * 创建信息窗口
 * @param title 标题
 * @param content 窗口信息详情
 * @returns {HTMLDivElement} 返回信息html数据
 */
export function  createInfoWindow(title, content) {
  let info = document.createElement('div')
  info.className = 'custom-info input-card content-window-card'

  //可以通过下面的方式修改自定义窗体的宽高
  info.style.width = '400px'
  // 定义顶部标题
  let top = document.createElement('div')
  let titleD = document.createElement('div')
  top.className = 'info-top'
  titleD.innerHTML = title

  top.appendChild(titleD)
  info.appendChild(top)

  // 定义中部内容
  let middle = document.createElement('div')
  middle.className = 'info-middle'
  // middle.style.backgroundColor = 'white';
  middle.innerHTML = content
  info.appendChild(middle)

  // 定义底部内容
  let bottom = document.createElement('div')
  bottom.className = 'info-bottom'
  bottom.style.position = 'relative'
  bottom.style.top = '0px'
  bottom.style.margin = '0 auto'
  info.appendChild(bottom)
  return info
}

/**
 * 根据类型获取不同的标点数据
 * @param url 不同类型的请求
 * @param parameter 参数{id：id值}
 * @returns {Promise<*>}
 */
export async function  getTypeList(url, parameter) {
  return axios({
    url: url,
    method: 'get',
    params: parameter
  })
}

/**
 * 判断字符串是否可用
 * @param str 字符串
 * @returns {boolean} true/false
 */
export function isUse(str) {
  if (str !== null && str !== undefined && str !== '') {
    return true
  } else {
    return false
  }
}

/**
 * 请求智慧环卫综合数据列表
 * @param parameter
 * @returns {*}
 */
export function getZhzhList(parameter) {
  return axios({
    url: api.getZhzhList,
    method: 'post',
    params: parameter
  })
}

/**
 * 绘制图形
 * @param type 点：marker ；线：polyline ；多边形：polygon ；矩形：rectangle ；圆 ：circle ；
 */
export function draw(mouseTool, type) {
  switch (type) {
    case 'marker': {
      mouseTool.marker({
        //同Marker的Option设置
      })
      break
    }
    case 'polyline': {
      mouseTool.polyline({
        strokeColor: '#80d8ff'
        //同Polyline的Option设置
      })
      break
    }
    case 'polygon': {
      mouseTool.polygon({
        fillColor: '#00b0ff',
        strokeColor: '#80d8ff'
        //同Polygon的Option设置
      })
      break
    }
    case 'rectangle': {
      mouseTool.rectangle({
        fillColor: '#00b0ff',
        strokeColor: '#80d8ff'
        //同Polygon的Option设置
      })
      break
    }
    case 'circle': {
      mouseTool.circle({
        fillColor: '#00b0ff',
        strokeColor: '#80d8ff'
        //同Circle的Option设置
      })
      break
    }
  }
}

/**
 * 鼠标移动提示坐标信息
 * @param _this vue页面对象
 */
export function mouseMovingTip(_this) {
  // 圆点标记
  let circleMarker = new _this.AMap.CircleMarker({
      map: _this.map,
      radius: 5,//3D视图下，CircleMarker半径不要超过64px
      strokeColor: 'white',
      strokeWeight: 2,
      strokeOpacity: 0.5,
      fillColor: 'rgb(0,153,255)',
      fillOpacity: 0.5,
      zIndex: 10,
      bubble: true,
      cursor: 'pointer',
      clickable: true
    }),
    // 创建纯文本标记
    text = new _this.AMap.Text({
      map: _this.map,
      offset: new _this.AMap.Pixel(10, 5),
      anchor: 'top-left', // 设置文本标记锚点
      draggable: true,
      cursor: 'pointer',
      style: {
        'padding': '.5rem 1rem',
        'margin-bottom': '1rem',
        'border-radius': '.25rem',
        'background-color': 'rgba(0, 0, 0, 0.5)',
        'width': '14rem',
        'border-width': 0,
        'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
        'font-size': '14px',
        'color': 'white'
      }
    })
  // 监听鼠标在地图上移动事件
  _this.AMap.event.addListener(_this.map, 'mousemove', function(e) {
    // 圆点位置设置
    circleMarker.setCenter([e.lnglat.getLng(), e.lnglat.getLat()]);
    // 提示信息位置设置
    text.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]) ;
    // 提示信息内容设置
    text.setText('点击鼠标确定信息标点位置<br/>经度:' + e.lnglat.getLng() + '<br/>纬度：' + e.lnglat.getLat())
  })
}

/**
 * 坐标转为地址
 * @param _this vue 页面对象
 * @param e 鼠标点击事件
 */
export function regeoCode(_this, e) {
  let geocoder = new _this.AMap.Geocoder({}) ;
  // 坐标转换为地址服务，高德地图
  geocoder.getAddress(e.lnglat, function(status, result) {
    if (status === 'complete' && result.regeocode) {
      // 地址信息
      _this.address = result.regeocode.formattedAddress ;
      // 创建标点
      let marker = new _this.AMap.Marker({
        icon: require('@/assets/img/map/mark.png'),
        position: e.lnglat,
        map: _this.map
      })
      // 标点提示信息
      tip(_this, marker)
      // 返回数据
      _this.$bus.$emit('showaddress', {
        'jd':e.lnglat.getLng(),
        'wd':e.lnglat.getLat(),
        // 'location': [e.lnglat.getLng(), e.lnglat.getLat()],
        'address': _this.address
      })
    } else {
      log.error('根据经纬度查询地址失败')
    }
  })
}

/**
 * 标点提示信息
 * @param _this
 * @param marker
 */
export function markerTip(_this, marker) {
  // 获取当前点位信息
  let position = marker.getPosition(),
    lng = position.getLng(),
    lat = position.getLat(),
    // 创建纯文本标记
    text = new _this.AMap.Text({
      map: _this.map,
      position: position,
      text: ' 经度：' + lng + '<br/> 纬度：' + lat + '<br/>地址：' + _this.address,
      offset: new _this.AMap.Pixel(10, 5),
      anchor: 'top-left', // 设置文本标记锚点
      draggable: true,
      visible: false,
      cursor: 'pointer',
      style: {
        'padding': '.5rem 1rem',
        'margin-bottom': '1rem',
        'border-radius': '.25rem',
        'min-width': '14em',
        'background-color': 'rgba(0, 0, 0, 0.5)',
        'width': 'auto',
        'border-width': 0,
        'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
        'font-size': '14px',
        'color': 'white'
      }
    }) ;
  // 鼠标经过标点事件
  _this.AMap.event.addListener(marker, 'mouseover', function(e) {
    text.show()
  })
  // 鼠标离开标点事件
  _this.AMap.event.addListener(marker, 'mouseout', function(e) {
    text.hide()
  })
}

/**
 * 自动提示查询poi数据
 * @param _this
 * @param callback
 */
export function autoComplete(_this, callback) {
  // 输入提示
  const autoOptions = {
    input: 'tipinput'
  } ;
  // 自动提示服务
  const auto = new _this.AMap.Autocomplete(autoOptions)
  // 构造地点查询类
  _this.AMap.event.addListener(auto, 'select', callback)// 注册监听，当选中某条记录时会触发
}

/**
 * 根据关键字搜索poi数据
 * @param _this
 * @param key
 */
export function placeSearchBykey(_this, key) {
  // poi 搜索服务
  _this.placeSearch.search(key, function(status, result) {
    if (status == 'complete') {
      let poi = result.poiList.pois[0],
        marker = new _this.AMap.Marker({
          icon: require('@/assets/img/map/mark.png'),
          position: poi.location,
          map: _this.map
        }) ;
      // 标点提示信息
      tip(_this, marker) ;
      _this.map.setFitView() ;
      // 返回数据
      _this.$bus.$emit('showaddress', {
        // 'location': [poi.location.lng, poi.location.lat],
        // 'jd':poi.lnglat.getLng(),
        // 'wd':poi.lnglat.getLat(),
        'jd':poi.location.lng,
        'wd':poi.location.lat,
        'address': _this.address
      }) ;
    }
  })
}

/**
 * 定位相关数据请求方法
 * @param url 不同类型的请求
 * @param parameter 参数
 * @returns {Promise<*>}
 */
export function getData(url, parameter) {
  return axios({
    url: url,
    method: 'get',
    params: parameter
  })
}

/**
 * 轨迹回放
 * @param _this 当前vue页面对象
 * @param marker 回放的轨迹点
 */
export function moveMarker(_this , marker , url , param) {
  getData(url, param).then(res => {
      if (res.code == 200 && res.result.length >0 ) {
        // 数据
        let lineArr =  res.result ;
        // 绘制轨迹
        let polyline = new _this.AMap.Polyline({
          map: _this.map,
          path: lineArr,
          showDir:true,
          strokeColor: "#28F",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6,      //线宽
          // strokeStyle: "solid"  //线样式
        });
        polyline.hide();
        // 移动后路线
        let passedPolyline = new _this.AMap.Polyline({
          map: _this.map,
          // path: lineArr,
          strokeColor: "#AF5",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6,      //线宽
          // strokeStyle: "solid"  //线样式
        });
        // 存储移动后路径
        _this.polyline.push(polyline ,passedPolyline);
        // 实时生成移动后路径
        marker.on('moving', function (e) {
          passedPolyline.setPath(e.passedPath);
        });
        // 设置移动速度及路线
        marker.moveAlong(lineArr, 150);
        _this.map.setFitView();
      }
    }).catch(err => {})

}
